<template>
  <!-- 预览简历 -->
  <view
    class="box"
    @click=";(moreChage = false), (informationNoBubbles = false)"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <view class="dengLoadingVue" v-if="loading">
      <view class="maskVueHiddenShow">
        <view class="maskVueHiddenShowWrapper">
          <view class="loader">
            <view class="inner one"></view>
            <view class="inner two"></view>
            <view class="inner three"></view>
          </view>
          <view class="loding"> 数据加载中，请稍后... </view>
        </view>
      </view>
    </view>

    <view v-if="!loading">
      <view class="head">
        <view class="title">
          <image
            class="fanhui"
            @click.stop="goBack"
            src="https://pic.bangbangtongcheng.com/static/bbzc/left-btn.png"
            mode=""
          >
          </image>
          <view class="title-text">
            <span>简历详情</span>
          </view>
        </view>

        <!-- 信息编号 -->
        <!-- <view class="center" :style="isViewVisible ? 'margin-top: 75rpx;' : 'margin-top: 20rpx;'"> -->
        <view class="center">
          <view class="center_top">
            <view class="isViewVisible" v-show="isViewVisible">
              <!-- #ifdef MP-WEIXIN -->
              <!-- <view :style="'padding-top:' + statusBarHeight1 + 'px;height:' + (statusBarHeight1 + 44) + 'px'">
						</view> -->
              <!-- #endif -->
              <!-- #ifndef MP-WEIXIN -->
              <!-- <view :style="'padding-top:' + statusBarHeight1 + 'px;height:' + (statusBarHeight1 + 54) + 'px'">
						</view> -->
              <!-- #endif -->
              <view class="number">
                <view style="display: flex">
                  <span
                    v-if="curriculumVitae"
                    @click.stop="informationNoBubbles = !informationNoBubbles"
                    >信息编号：{{ curriculumVitae.resumeId }}</span
                  >
                  <view class="informationNoBubble" v-if="informationNoBubbles">
                    <view class="binds_1">
                      信息编号是唯一的信息身份号码，可在帮帮同城进行准确搜索查找。
                    </view>
                    <view class="binds_2"> 联系发布人时可通过信息编号确认信息。 </view>
                  </view>
                  <span style="margin: 0rpx 20rpx; color: #cdcdcf">|</span>
                  <view class="remark">
                    <view class="status">
                      <span class="select-text" @click="selectBoxShow = !selectBoxShow">
                        <span>状态：{{ auditStatusText }}</span>
                        <img
                          :class="selectBoxShow ? 'arrow-right open' : 'arrow-right'"
                          src="https://pic.bangbangtongcheng.com/static/bbzc/arrow-right.png"
                          alt=""
                        />
                      </span>
                      <view v-show="selectBoxShow" class="select-box">
                        <view
                          v-for="(v, i) in auditStatusOption"
                          :key="'topAuditStatus' + i"
                          :value="v.value"
                          :class="v.value == topAuditStatus ? 'checked' : ''"
                          :disabled="v.disabled"
                          @click="changeAuditStatus(v)"
                        >
                          {{ v.label }}
                          <img
                            v-if="v.value == topAuditStatus"
                            class="checked-icon"
                            src="https://pic.bangbangtongcheng.com/static/checked.png"
                            alt=""
                          />
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <view class="icon">
                  <!-- <view>
									<image @click="fn"
										src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/black-share.png">
									</image>
								</view> -->

                  <view class="genduoNew" @click.stop="moreChage = !moreChage">
                    <image
                      src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/black-more.png"
                    >
                    </image>
                    <view class="administrations" v-if="moreChage">
                      <text class="items" @click="shield"> 屏蔽 </text>
                      <text class="items" style="border-bottom: none" @click="jubao"> 举报 </text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="main" v-if="this.curriculumVitae">
        <!-- 备注信息 -->
        <!-- <view class="mark">
				<view class="history">
					<span style="color: #000;">备注您的此信息的了解情况：</span>
					<span class="history-right">
						<span>历史记录：{{ historyCount }}条</span>
						<img style="width: 28rpx;height: 28rpx" src="https://pic.bangbangtongcheng.com/static/bbzc/arrow-right.png"
							alt="">
					</span>
				</view>
				<view class="voice">
					<span class="voice-left">
						<span>语音记录</span>
						<img class="icon voice-icon" src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetailsvoice.png"
							alt="">
					</span>
					<span class="voice-right" @click="saveHistory">保存</span>
				</view>
				<view class="text-record">
					<u-textarea v-model="recordDescription" count :maxlength="200" confirmType="done" ref="textarea"
						style="width: 100%;" border="0" placeholder="文字记录：对此信息情况简单描述"
						placeholderStyle="color: #ccc; font-size: 24rpx;"></u-textarea>
				</view>
				<view class="media">
					<u-upload :fileList="videoList" @afterRead="afterReadVideo" @delete="deletePic(0)" name="2" :maxCount="1"
						accept="video" uploadText="上传视频" previewFullImage class="video-upload"
						uploadIcon="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetailsvideo.png">
					</u-upload>

					<view v-if="videoList.length > 0" class="video-btn" @click="videoShow = true"></view>
					<u-overlay :show="videoShow" @click="videoShow = false">
						<view class="warp">
							<video v-if="videoList.length > 0" class="video-preview" :src="videoList[0].url" controls></video>
						</view>
					</u-overlay>

					<u-upload :fileList="pic1" @afterRead="afterRead1" @delete="deletePic(1)" name="1" :maxCount="1"
						uploadText="上传图片"></u-upload>
					<u-upload :fileList="pic2" @afterRead="afterRead2" @delete="deletePic(2)" name="1" :maxCount="1"
						uploadText="上传图片"></u-upload>
					<u-upload :fileList="pic3" @afterRead="afterRead3" @delete="deletePic(3)" name="1" :maxCount="1"
						uploadText="上传图片"></u-upload>
				</view>
			</view> -->

        <!-- 基本信息 -->
        <view class="section">
          <view class="section-title">
            <span class="title-line"></span>
            基本信息
          </view>
          <view class="form-item">
            <span class="label"
              >姓<span style="display: inline-block; width: 55rpx"></span>名：</span
            >
            <span class="text">{{ curriculumVitae.realName || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label"
              >性<span style="display: inline-block; width: 55rpx"></span>别：</span
            >
            <span class="text">{{ curriculumVitae.sexualDistinction === '1' ? '男' : '女' }}</span>
          </view>
          <view class="form-item">
            <span class="label"
              >年<span style="display: inline-block; width: 55rpx"></span>龄：</span
            >
            <span class="text" v-if="curriculumVitae.age">{{ curriculumVitae.age }}岁</span>
            <span v-else>-</span>
          </view>
          <view class="form-item">
            <span class="label"
              >学<span style="display: inline-block; width: 55rpx"></span>历：</span
            >
            <span class="text">{{ curriculumVitae.highestEducation || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">工作经验：</span>
            <span class="text">
              {{ curriculumVitae.workYear }}年 | {{ curriculumVitae.workingTime }}年参加工作
            </span>
          </view>
          <view class="form-item">
            <span class="label">现居地址：</span>
            <span class="text">{{ homeAddress }}</span>
          </view>
          <view class="form-item">
            <span class="label">自我介绍：</span>
            <span class="text">{{ curriculumVitae.introduction || '-' }}</span>
          </view>
          <!-- 头像 -->
          <img
            class="avator"
            :src="curriculumVitae.myPhoto || 'https://pic.bangbangtongcheng.com/static/avator.png'"
            alt=""
          />
        </view>

        <!-- 意向职位 -->
        <view class="section">
          <view class="section-title">
            <span class="title-line"></span>意向职位
            <view class="right-text">{{
              curriculumVitae.jobStatus == 1 ? '离职，随时到岗' : '在职，考虑机会'
            }}</view>
          </view>
          <view class="form-item" style="flex-wrap: wrap; width: 100%">
            <span class="form-item-tag" v-for="item in intendedPositionList">{{ item }}</span>
          </view>
          <view class="form-item">
            <span class="label">求职类型：</span>
            <span class="text" v-if="curriculumVitae.jobType === 0">全职</span>
            <span class="text" v-if="curriculumVitae.jobType === 1">兼职</span>
            <span class="text" v-if="curriculumVitae.jobType === 2">全职兼职均可</span>
          </view>
          <view class="form-item">
            <span class="label">期望薪资：</span>
            <span class="text">{{ curriculumVitae.salaryExpectation || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">工作区域：</span>
            <span class="text">{{ workLocationText || '-' }}</span>
          </view>
        </view>

        <!-- 教育经历 -->
        <view class="section">
          <view class="section-title"> <span class="title-line"></span>教育经历 </view>
          <view class="form-item">
            <span class="label">毕业院校：</span>
            <span class="text">{{ curriculumVitae.graduationAcademy.schoolName || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">所学专业：</span>
            <span class="text">{{ curriculumVitae.graduationAcademy.major || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">毕业时间：</span>
            <span class="text">{{
              curriculumVitae.graduationAcademy.schoolHours
                ? curriculumVitae.graduationAcademy.schoolHours.split('-')[0] + '年'
                : '-'
            }}</span>
          </view>
          <view class="form-item" style="flex-wrap: wrap; align-items: flex-start">
            <span class="label">获得荣誉：</span>
            <span style="flex: 1" v-if="curriculumVitae.graduationAcademy.honorReceived">
              <span
                class="form-item-tag"
                v-if="curriculumVitae.graduationAcademy.honorReceived.length == 0"
                >-</span
              >
              <span
                class="form-item-tag"
                v-for="item in curriculumVitae.graduationAcademy.honorReceived"
                >{{ item }}</span
              >
            </span>
            <span v-else>-</span>
          </view>
          <view class="form-item">
            <span class="label">学习经历：</span>
            <u-read-more ref="uReadMore" class="text" :toggle="true" showHeight="38" textIndent="0">
              <u-parse
                :content="curriculumVitae.graduationAcademy.associationActivity || '-'"
              ></u-parse>
            </u-read-more>
          </view>
        </view>

        <!-- 工作经历 -->
        <view
          class="section"
          v-for="(item, index) in curriculumVitae.workExperience"
          :key="'work' + index"
        >
          <view class="section-title"> <span class="title-line"></span>工作经历 </view>
          <view class="form-item">
            <span class="label">公司名称：</span>
            <span class="text">{{ item.corporateName || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">职位类别</span>
            <span class="text">{{ item.positionNameText || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">在职时间：</span>
            <span class="text">{{ item.onJobTime || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">薪资范围：</span>
            <span class="text">{{ item.salaryRange || '-' }}</span>
          </view>
          <view class="form-item">
            <span class="label">工作描述：</span>
            <u-read-more
              ref="uReadMore"
              class="text"
              :toggle="true"
              showHeight="180"
              textIndent="0"
            >
              <u-parse :content="item.jobContent || '-'"></u-parse>
            </u-read-more>
          </view>
          <view class="form-item" style="flex-wrap: wrap; align-items: flex-start">
            <span class="label">个人优势：</span>
            <span v-if="item.personalAdvantage.length > 0" style="flex: 1">
              <span
                class="form-item-tag"
                v-for="(v, i) in item.personalAdvantage"
                :key="v.valueName + i"
                >{{ v.valueName }}</span
              >
            </span>
            <span v-else>-</span>
          </view>
        </view>

        <!-- 加分项 -->
        <view class="section" v-if="curriculumVitae.bonusItem">
          <view class="section-title"> <span class="title-line"></span>加分项 </view>

          <view
            v-if="
              curriculumVitae.bonusItem.trainingExperience &&
              curriculumVitae.bonusItem.trainingExperience.length > 0
            "
          >
            <view
              class="form-item bonus-item"
              v-for="(item, index) in curriculumVitae.bonusItem.trainingExperience"
              :key="'edu' + index"
            >
              <span class="label">培训经历：</span>
              <view class="content">
                <view>{{ item.trainingCourse }}</view>
                <view class="second-line">
                  <span>{{ item.trainingInstitutions }}</span>
                  <span>{{ item.trainingTime }}</span>
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="form-item bonus-item">
              <span class="label">培训经历：</span>
              <view class="content">-</view>
            </view>
          </view>

          <view
            v-if="
              curriculumVitae.bonusItem.languageAbility &&
              curriculumVitae.bonusItem.languageAbility.length > 0
            "
          >
            <view
              class="form-item bonus-item"
              v-for="(item, index) in curriculumVitae.bonusItem.languageAbility"
              :key="'language' + index"
            >
              <span class="label">语言能力：</span>
              <view class="content">
                <span>{{ item.languages }}</span>
                <span style="padding: 0 10rpx">/</span>
                <span v-if="item.listeningSpeakingAbility === '1'">听说能力一般</span>
                <span v-if="item.listeningSpeakingAbility === '2'">听说能力良好</span>
                <span v-if="item.listeningSpeakingAbility === '3'">听说能力熟练</span>
                <span v-if="item.listeningSpeakingAbility === '4'">听说能力精通</span>
                <span style="padding: 0 10rpx">/</span>
                <span v-if="item.readingWritingAbility === '1'">读写能力一般</span>
                <span v-if="item.readingWritingAbility === '2'">读写能力良好</span>
                <span v-if="item.readingWritingAbility === '3'">读写能力熟练</span>
                <span v-if="item.readingWritingAbility === '4'">读写能力精通</span>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="form-item bonus-item">
              <span class="label">语言能力：</span>
              <view class="content">-</view>
            </view>
          </view>

          <view
            v-if="
              curriculumVitae.bonusItem.qualification &&
              curriculumVitae.bonusItem.qualification.length > 0
            "
          >
            <view
              class="form-item bonus-item"
              v-for="(item, index) in curriculumVitae.bonusItem.qualification"
              :key="'qualification' + index"
            >
              <span class="label">资质证书：</span>
              <view class="content">
                <span>{{ item.getTime }}荣获</span>
                <span style="padding: 0 10rpx">/</span>
                <span>{{ item.certificateName }}</span>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="form-item bonus-item">
              <span class="label">资质证书：</span>
              <view class="content">-</view>
            </view>
          </view>

          <view
            v-if="
              curriculumVitae.bonusItem.professionalSkills &&
              curriculumVitae.bonusItem.professionalSkills.length > 0
            "
          >
            <view
              v-for="(item, index) in curriculumVitae.bonusItem.professionalSkills"
              :key="'skills' + index"
            >
              <view class="form-item bonus-item">
                <span class="label">专业技能：</span>
                <view class="content">
                  <span>{{ item.skillName }}</span>
                  <span style="padding: 0 10rpx">/</span>
                  <span v-if="item.mastery === '1'">一般掌握</span>
                  <span v-if="item.mastery === '2'">良好掌握</span>
                  <span v-if="item.mastery === '3'">熟练掌握</span>
                  <span v-if="item.mastery === '4'">精通掌握</span>
                  <span style="padding: 0 10rpx">/</span>
                  <span>{{ item.duration }}年</span>
                </view>
              </view>

              <view class="form-item bonus-item">
                <span class="label">证书/作品：</span>
                <view class="content" style="line-height: 0">
                  <img
                    class="img"
                    v-for="(item, index) in item.certificateWorks"
                    :key="'certificate' + index"
                    :src="item"
                    alt=""
                    @click="handlePreview(item)"
                  />
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="form-item bonus-item">
              <span class="label">专业技能：</span>
              <view class="content">-</view>
            </view>
            <view class="form-item bonus-item">
              <span class="label">证书/作品：</span>
              <view class="content">-</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 预览图片 -->
      <u-overlay :show="previewPic" @click="previewPic = false">
        <view class="preview-warp">
          <img :src="previewPicSrc" alt="" />
        </view>
      </u-overlay>

      <!-- 底部 -->
      <view class="feahd_bottom">
        <view class="collect" @click="chat()">
          <image
            class="img"
            src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/chat.png"
          />
          <span>聊一聊</span>
        </view>
        <!-- #ifdef APP-PLUS -->
        <view
          class="collect"
          @click="onphoneBefore()"
          style="background: #e7f5f4; border: 1rpx solid #0fa291; color: #0fa291"
        >
          <image
            class="img"
            src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/dianhuahover.png"
          />
          <span>拨打电话</span>
        </view>
        <!-- #endif -->
        <!-- #ifndef APP-PLUS -->
        <view
          class="collect"
          @click="onphoneBefore()"
          style="background: #e7f5f4; border: 1rpx solid #0fa291; color: #0fa291"
        >
          <image
            class="img"
            src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/dianhuahover.png"
          />
          <span>拨打电话</span>
        </view>
        <!-- #endif -->
        <view class="feahd_right">
          <view class="weigui" v-if="weig" @click="weigui">
            <image class="img" src="https://pic.bangbangtongcheng.com/static/weigui.png" />
            <p>
              该用户有<text style="color: red">{{ Count }}</text
              >条违规信息！
            </p>
          </view>
        </view>
      </view>

      <!-- 屏蔽 -->
      <uni-popup ref="binds_shield" type="center">
        <view class="binds_shield">
          <view class="text"> 屏蔽后不会对你推荐该人才，你发布的信息也不会对其展示 </view>
          <view class="btn">
            <view class="qx_btn" @click="qx_shield"> 取消 </view>
            <view class="qd_btn" @click="qd_shield"> 确定 </view>
          </view>
        </view>
      </uni-popup>

      <!-- 返回顶部 -->
      <back-top :scrollTop="scrollTop"></back-top>
      <!-- 回到首页 -->
      <uniBall></uniBall>
    </view>
  </view>
</template>
<script>
  //#ifdef H5
  import wxshare from '@/utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  import { getYear, formatDateAdjusted } from '../../util/dateTimePicker.js'
  import imageUploadCropper from '@/components/imageUploadCropper.vue'
  import { district } from '@/util/enum.js'
  import _ from 'lodash'

  export default {
    components: {
      imageUploadCropper,
    },
    data() {
      return {
        loading: true,
        id: '',
        navigateType: '',
        scrollTop: 0,
        userMarkCallStatus: 1, //1、有简历且发布者未开启拨打电话同时投递简历；2、有简历且发布者开启拨打电话同时投递简历；3、未投递简历
        userInfo: uni.getStorageSync('Pduser'),
        weig: false, // 是否有违规信息
        historyCount: 0, // 历史记录
        homeAddress: '', // 优化后的地址
        curriculumVitae: {
          graduationAcademy: {
            schoolName: '', // 毕业院校
            major: '', // 所学专业
            schoolHours: '', //毕业时间
            associationActivity: '', // 学习经历
            honorReceived: [], // 获得荣誉
          },
          //加分项
          bonusItem: {
            trainingExperience: [],
            languageAbility: [],
            professionalSkills: [],
            qualification: [],
          },
        },
        intendedPositionList: [],
        district, // 地区枚举
        workLocationText: '', // 工作地区文本
        selectorDistrict: false, // 工作地区选择器容器
        educationKey: 1000,
        workExpIndex: 0, // 工作经历数组索引
        workExpKey: 0,
        checked: false, // 同意发布
        recordDescription: '', // 描述
        videoList: [], //上传视频
        pic1: [], // 图片1
        pic2: [], // 图片2
        pic3: [], // 图片3
        videoShow: false,
        isViewVisible: true, // 控制目标view的显示状态
        informationNoBubbles: false,
        moreChage: false,
        selectBoxShow: false, // 状态修改下拉
        // 简历状态
        auditStatusOption: [
          {
            label: '感兴趣',
            value: '2',
          },
          {
            label: '不满意',
            value: '3',
          },
        ],
        topAuditStatus: 1, // 顶部简历状态
        auditStatusText: '待沟通',
        previewPic: false, // 预览证书图片
        previewPicSrc: '', // 预览图片地址
      }
    },
    onLoad(option) {
      // 获取微信小程序胶囊和据右边宽度
      // 获取胶囊信息
      // #ifdef MP-WEIXIN
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let getWindowInfo = uni.getWindowInfo().screenWidth
      this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width)
      // #endif
      if (option) {
        this.navigateType = option.navigateType
        this.id = option.id
        this.resumeId = option.resumeId
      }
      //初始化
      this.init()

      // 获取是否有违规信息
      this.getCount()

      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    onPageScroll: function (Object) {
      this.scrollTop = Object.scrollTop //实时获取到滚动的值
    },
    methods: {
      async init() {
        //获取简历详情
        await this.getUserResumeDetails()
        // 标记简历已读
        await this.markRead()
        // 获取上门看过历史记录
        const historyParams = {
          userId: this.userInfo.id,
          relatedBusiness: this.id,
          visitType: '1', //类型(1: 招聘,2: 简历)
        }
        const historyRes = await this.$myRequest.get(
          '/api/mobile/personnelOwner/queryVisitedHistory',
          historyParams
        )
        if (historyRes.code === 200) {
          if (JSON.stringify(historyRes.visitedHistory) !== '{}') {
            this.recordDescription = historyRes.visitedHistory.recordDescription
            const picList = historyRes.visitedHistory.recordPicture.split(',')
            this.pic1 = [{ url: picList[0] }]
            this.pic2 = [{ url: picList[1] }]
            this.pic3 = [{ url: picList[2] }]
            this.videoList = [{ url: historyRes.visitedHistory.recordVideo }]
          }
        }

        // 上门看过信息列表
        const historyListParams = {
          userId: this.userInfo.id,
          relatedBusiness: this.curriculumVitae.resumeId,
          visitType: '1', //类型(1: 招聘,2: 简历)
        }
        const historyListRes = await this.$myRequest.get(
          '/api/mobile/personnelOwner/getMyVisitedLookHistoryList',
          historyListParams
        )
        if (historyListRes.code === 200) {
          if (JSON.stringify(historyRes.visitedHistory) !== '{}') {
          }
        }
      },
      // 获取简历详情
      async getUserResumeDetails() {
        if (this.navigateType === 'receive') {
          // 收到投递简历详情
          const data = {
            id: this.id,
          }
          const res = await this.$myRequest.get(
            '/api/mobile/personnelOwner/getResumeDeliveryRecordDetails',
            data
          )
          if (res.code === 200) {
            // 如果没有缓存数据,则以接口数据为准
            this.curriculumVitae = { ...this.curriculumVitae, ...res.resumeDeliveryRecordDetails }

            // 工作经验(后端返回数据不稳定)
            if (this.curriculumVitae.workingTime && this.curriculumVitae.workingTime.length > 4) {
              this.curriculumVitae.workingTime = this.curriculumVitae.workingTime.slice(0, 4)
            }
            // 计算工作经验
            const newDate = new Date()
            const year = newDate.getFullYear()
            this.curriculumVitae.workYear = year - this.curriculumVitae.workingTime

            // 回显需要特殊处理的表单数据
            this.echoData()
            console.log('this.curriculumVitae', this.curriculumVitae)
          }
        } else if (this.navigateType === 'download') {
          // 下载简历详情
          const data = {
            id: this.id,
          }
          const res = await this.$myRequest.get(
            '/api/mobile/personnelOwner/getDownloadResumeDetail',
            data
          )
          if (res.code === 200) {
            // 如果没有缓存数据,则以接口数据为准
            this.curriculumVitae = { ...this.curriculumVitae, ...res.downloadResumeDetail }
            // 回显需要特殊处理的表单数据
            this.echoData()
            console.log('this.curriculumVitae', this.curriculumVitae)
          }
        }
      },
      // 更改状态
      async changeAuditStatus(v) {
        console.log('v', v)
        if (this.curriculumVitae.jobProgress == v.value) return
        this.topAuditStatus = v.value
        this.auditStatusText = v.label
        if (this.navigateType === 'receive') {
          const params = {
            userId: this.userInfo.id,
            objectivesId: this.id, // 投递简历id
            userIdentity: 2, // 用户标识（1：求职进程，2：收到简历）
            status: v.value, // 状态（2：感兴趣，3：不满意）
            id: this.id,
          }
          const res = await this.$myRequest.post(
            '/api/mobile/personnelOwner/modifyJobProgress',
            params
          )
          if (res.code === 200) {
            // 更新状态
            this.getUserResumeDetails()
          }
        } else if (this.navigateType === 'download') {
          // 下载简历 修改状态接口，切换状态
          const statusParams = {
            id: this.id, // 下载简历id
            status: v.value, // 状态（2：感兴趣，3：不满意）
          }
          const res = await this.$myRequest.post(
            '/api/mobile/personnelOwner/modifyDialogueState',
            statusParams
          )
          if (res.code === 200) {
            // 更新状态
            this.getUserResumeDetails()
          }
        }

        // 请求接口，切换状态
        setTimeout(() => {
          this.selectBoxShow = false
        }, 500)
      },
      // 地址逆解析
      addressAnalyze(address) {
        let that = this
        uni.request({
          url: `https://restapi.amap.com/v3/geocode/geo?address=${address}&key=42933539a9d7c73982510a357f504624`,
          success: (res) => {
            that.homeAddress = `${res.data.geocodes[0].province}${res.data.geocodes[0].city}${res.data.geocodes[0].district}${res.data.geocodes[0].street}`
          },
        })
      },
      // 回显需要特殊处理的表单数据
      echoData() {
        this.topAuditStatus = this.curriculumVitae.jobProgress
        // 回显状态
        if (this.curriculumVitae.jobProgress == 1) {
          // 沟通中
          this.auditStatusText = '沟通中'
        } else if (this.curriculumVitae.jobProgress == 2) {
          // 感兴趣
          this.auditStatusText = '感兴趣'
        } else if (this.curriculumVitae.jobProgress == 3) {
          // 不满意
          this.auditStatusText = '不满意'
        }
        // 回显头像
        if (!this.curriculumVitae.myPhoto) {
          this.setDefaultAvator(this.curriculumVitae.sexualDistinction)
        }
        // 回显参加工作时间
        if (this.curriculumVitae.workingTime) {
          // 工作经验(后端返回数据不稳定)
          if (this.curriculumVitae.workingTime && this.curriculumVitae.workingTime.length > 4) {
            this.curriculumVitae.workingTime = this.curriculumVitae.workingTime.slice(0, 4)
          }
          // 计算工作经验
          const newDate = new Date()
          const year = newDate.getFullYear()
          this.curriculumVitae.workYear = year - Number(this.curriculumVitae.workingTime)
          console.log('workYear', this.curriculumVitae.workYear)

          this.curriculumVitae.workingTime = getYear(this.curriculumVitae.workingTime)
        }

        //	回显现居地址
        if (this.curriculumVitae.homeAddress) {
          this.addressAnalyze(this.curriculumVitae.homeAddress)
        }

        // 回显意向职位
        if (this.curriculumVitae.intendedPosition) {
          // 意向职位回显
          this.intendedPositionList = []
          if (this.curriculumVitae.intendedPosition) {
            let intendedPosition = JSON.parse(this.curriculumVitae.intendedPosition)
            // console.log('intendedPositionList', typeof(intendedPositionList));
            intendedPosition.length > 0 &&
              intendedPosition.map((v) => {
                let itemArr = v.split(',')
                this.intendedPositionList.push(itemArr[itemArr.length - 1])
              })
            // console.log('intendedPositionList', this.intendedPositionList);
          }
        }
        // 回显教育经历：毕业院校、毕业时间、学历、学习经历
        if (this.curriculumVitae.graduationAcademy) {
          if (typeof this.curriculumVitae.graduationAcademy == 'string') {
            this.curriculumVitae.graduationAcademy = JSON.parse(
              this.curriculumVitae.graduationAcademy
            )
            if (this.curriculumVitae.graduationAcademy.honorReceived) {
              this.curriculumVitae.graduationAcademy.honorReceived =
                this.curriculumVitae.graduationAcademy.honorReceived.split(',')
            }
          }
          // console.log('graduationAcademy', this.curriculumVitae.graduationAcademy);
        }

        // 回显意向工作区域
        if (this.curriculumVitae.workLocation) {
          const workLocation = JSON.parse(this.curriculumVitae.workLocation)
          this.workLocationText = ''
          workLocation.forEach((item) => {
            this.workLocationText += item.label + ' '
          })
        }

        // 回显工作经历
        if (this.curriculumVitae.workExperience) {
          // console.log('this.curriculumVitae.workExperience', this.curriculumVitae.workExperience);
          if (typeof this.curriculumVitae.workExperience === 'string') {
            this.curriculumVitae.workExperience = JSON.parse(this.curriculumVitae.workExperience)
          }

          let workExperience = this.curriculumVitae.workExperience
          // console.log('this.curriculumVitae.workExperience', this.curriculumVitae.workExperience);
          // 有工作经验数据
          if (Array.isArray(workExperience) && workExperience.length > 0) {
            workExperience.map((item) => {
              item.positionNameText = ''
              // console.log('item', item);

              // 回显职位
              if (item.positionName) {
                let positionName = JSON.parse(item.positionName)
                if (Array.isArray(positionName) && positionName.length > 0) {
                  positionName.map((v) => {
                    let itemArr = v.split(',')
                    item.positionNameText += itemArr[itemArr.length - 1] + ' '
                  })
                }
              }

              // 在职时间
              if (item.onJobTime) {
                if (item.onJobTime.includes('undefined')) {
                  item.onJobTime = ''
                } else {
                  const onJobTime = item.onJobTime.split('|')
                  item.onJobTime = `${formatDateAdjusted(onJobTime[0])} 至 ${formatDateAdjusted(
                    onJobTime[1]
                  )}`
                }
              }

              // 回显个人优势
              if (typeof item.personalAdvantage === 'string') {
                item.personalAdvantage = JSON.parse(item.personalAdvantage)
                item.personalAdvantage = item.personalAdvantage.filter((item) => item.checked)
              } else {
                item.personalAdvantage = []
              }
              console.log('item.personalAdvantage', item.personalAdvantage)
            })
          }
        }

        // 加分项
        if (
          typeof this.curriculumVitae.bonusItem === 'string' &&
          this.curriculumVitae.bonusItem !== ''
        ) {
          this.curriculumVitae.bonusItem = JSON.parse(this.curriculumVitae.bonusItem)
          console.log('this.curriculumVitae.bonusItem', this.curriculumVitae.bonusItem)

          this.curriculumVitae.bonusItem.trainingExperience = this.curriculumVitae.bonusItem
            .trainingExperience
            ? JSON.parse(this.curriculumVitae.bonusItem.trainingExperience)
            : []

          this.curriculumVitae.bonusItem.languageAbility = this.curriculumVitae.bonusItem
            .languageAbility
            ? JSON.parse(this.curriculumVitae.bonusItem.languageAbility)
            : []

          this.curriculumVitae.bonusItem.qualification = this.curriculumVitae.bonusItem
            .qualification
            ? JSON.parse(this.curriculumVitae.bonusItem.qualification)
            : []

          this.curriculumVitae.bonusItem.professionalSkills = this.curriculumVitae.bonusItem
            .professionalSkills
            ? JSON.parse(this.curriculumVitae.bonusItem.professionalSkills)
            : []

          console.log(
            'this.curriculumVitae.bonusItem.professionalSkills',
            this.curriculumVitae.bonusItem.professionalSkills
          )

          if (Array.isArray(this.curriculumVitae.bonusItem.trainingExperience)) {
            this.curriculumVitae.bonusItem.trainingExperience.map((v) => {
              if (v.trainingTime) {
                v.trainingTime = formatDateAdjusted(v.trainingTime)
              }
            })
          }

          if (Array.isArray(this.curriculumVitae.bonusItem.qualification)) {
            this.curriculumVitae.bonusItem.qualification.map((v) => {
              if (v.getTime) {
                v.getTime = formatDateAdjusted(v.getTime)
              }
            })
          }

          if (Array.isArray(this.curriculumVitae.bonusItem.professionalSkills)) {
            this.curriculumVitae.bonusItem.professionalSkills.map((v) => {
              if (v.certificateWorks) {
                v.certificateWorks = JSON.parse(v.certificateWorks)
                console.log('v.certificateWorks ', v.certificateWorks)
              } else {
                v.certificateWorks = []
              }
            })
          }
          // console.log('this.curriculumVitae.bonusItem', this.curriculumVitae.bonusItem);
        }

        this.loading = false
      },
      // 设置默认头像
      setDefaultAvator(sex) {
        // 从1-5中随机取数,给一个随机的默认头像
        const index = Math.floor(Math.random() * 5) + 1
        if (this.curriculumVitae.sexualDistinction == '1' || sex == '1') {
          // 男生头像
          this.curriculumVitae.myPhoto = `https://pic.bangbangtongcheng.com/static/bbzc/m${index}.png`
        } else {
          // 女生头像
          this.curriculumVitae.myPhoto = `https://pic.bangbangtongcheng.com/static/bbzc/w${index}.png`
        }
      },
      //上传视频
      async afterReadVideo(file, lists, name) {
        const result = await this.uploadFilePromise(file.file.url)
        this.videoList = result
      },
      // 图片1
      async afterRead1(event) {
        const result = await this.uploadFilePromise(event.file.url)
        this.pic1 = result
      },
      // 删除图片1
      deletePic(index) {
        if (index == 0) {
          this.videoList = []
        } else {
          this[`pic${index}`] = []
        }
      },
      // 图片2
      async afterRead2(event) {
        const result = await this.uploadFilePromise(event.file.url)
        this.pic2 = result
      },
      // 图片3
      async afterRead3(event) {
        const result = await this.uploadFilePromise(event.file.url)
        this.pic3 = result
      },
      // 上传文件
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
            filePath: url,
            name: 'file',
            success: (res) => {
              console.log('res', res)
              resolve(JSON.parse(res.data).data)
            },
          })
        })
      },
      // 预览图片
      handlePreview(item) {
        this.previewPicSrc = item
        this.previewPic = true
      },

      // 发布上门看过信息
      async saveHistory() {
        console.log('his.pic1', this.pic1)
        const recordVideo = this.videoList.length > 0 ? this.videoList[0].url : ''
        const pic1 = this.pic1.length > 0 ? this.pic1[0].url : ''
        const pic2 = this.pic2.length > 0 ? this.pic2[0].url : ''
        const pic3 = this.pic3.length > 0 ? this.pic3[0].url : ''
        const recordPicture = `${pic1},${pic2},${pic3}`
        const params = {
          id: this.id, // 招聘id
          noteTaker: this.userInfo.id, // 记录人
          visitType: '1', //类型（1：招聘，2：简历）
          relatedBusiness: this.id, // 关联业务id
          recordDescription: this.recordDescription, //备注
          recordPicture, // 图片
          recordVideo, //视频
        }
        const res = await this.$myRequest.post(
          '/api/mobile/personnelOwner/increaseVisitedLook',
          params
        )
        if (res.code === 200) {
          uni.showToast({
            title: '保存成功',
            icon: 'none',
            mask: true,
          })
        }
      },
      // 标记简历已读
      async markRead() {
        if (this.navigateType === 'receive') {
          // 收到简历
          const params = {
            id: this.id, // 简历id
            markerBy: this.userInfo.id,
          }
          await this.$myRequest.post('/api/mobile/personnelOwner/markRead', params)
        } else if (this.navigateType === 'download') {
          // 下载简历
          const params = {
            id: this.id, // 简历id
            markerBy: this.userInfo.id,
          }
          await this.$myRequest.post('/api/mobile/personnelOwner/markReadToDownload', params)
        }
      },

      // 聊一聊
      chat() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${this.curriculumVitae.recipient}&img=${this.curriculumVitae.myPhoto}&nikeName=${this.curriculumVitae.nikeName}&id=${this.curriculumVitae.id}&type=3&index=${this.indexss}`,
        })
        if (this.indexss == 1) {
          this.indexss = 2
        }
      },
      // 拨打电话
      onphoneBefore() {
        if (!this.showLogin()) {
          return
        }
        this.changeAuditStatus({
          name: '沟通中',
          value: 1,
        })
        uni.makePhoneCall({
          phoneNumber: this.curriculumVitae.cellphoneNumber,
        })
      },

      // 获取违规信息
      getCount(id) {
        let that = this
        this.$myRequest
          .get('/mob/user/getReportMyRecord', {
            userId: id,
            businessType: 4,
          })
          .then((res) => {
            this.Count = res.page.count
            if (this.Count > 0) {
              that.weig = true
            }
          })
      },
      // shield() {
      //   if (this.curriculumVitae.publisherId == this.userInfo.id) {
      //     uni.showToast({
      //       title: '不可屏蔽自己发布的信息!',
      //       icon: 'none',
      //       mask: true,
      //     })
      //     return
      //   }
      //   uni.showActionSheet({
      //     itemList: ['不看这条信息', '不看TA发布的信息'],
      //     success: (res) => {
      //       if (res.tapIndex == 0) {
      //         this.getShield(1)
      //       } else {
      //         this.getShield(2)
      //       }
      //     },
      //     fail: function (res) { },
      //   })
      // },
      // 屏蔽
      shield() {
        this.$refs.binds_shield.open()
      },
      qx_shield() {
        this.$refs.binds_shield.close()
      },
      qd_shield() {
        let data = {
          shieldPeople: this.userInfo.id,
          associationId: this.curriculumVitae.resumeId,
          associationName: this.curriculumVitae.realName || '未命名用户',
          shieldingType: 4,
          shieldingTime: this.$Time.getTimes(),
        }
        this.$myRequest.post('/api/mobile/personnelOwner/increaseShield', data).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            mask: true,
          })
          setTimeout(() => {
            if (this.indexss == 1) {
              let pages = getCurrentPages()
              let prevPage = pages[pages.length - 2]
              prevPage.$vm.indexss = 1
            }
            uni.navigateBack({
              delta: 1,
            })
          }, 500)
        })
      },

      // getShield(index) {
      //   let data = {}
      //   if (index == 1) {
      //     data = {
      //       shieldPeople: this.userInfo.id,
      //       associationId: this.curriculumVitae.resumeId,
      //       associationName: this.curriculumVitae.realName || '未命名用户',
      //       shieldingType: 3,
      //       shieldingTime: this.$Time.getTimes(),
      //     }
      //   } else {
      //     data = {
      //       shieldPeople: this.curriculumVitae.publisherId,
      //       associationId: this.curriculumVitae.resumeId,
      //       associationName: this.curriculumVitae.realName || '未命名用户',
      //       shieldingType: 1,
      //       shieldingTime: this.$Time.getTimes(),
      //     }
      //   }
      //   this.$myRequest.post('/api/mobile/personnelOwner/increaseShield', data).then((res) => {
      //     uni.showToast({
      //       title: res.msg,
      //       icon: 'none',
      //       mask: true,
      //     })
      //     setTimeout(() => {
      //       uni.navigateBack({
      //         delta: 1,
      //       })
      //     }, 500)
      //   })
      // },
      // 举报
      jubao() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url:
            '/pages_recruitMoney/index/report?id=' +
            this.curriculumVitae.id +
            '&userId=' +
            this.curriculumVitae.publisherId +
            '&index=2',
        })
      },
      fn() {
        uni.showActionSheet({
          itemList: ['分享到微信好友', '分享到微信朋友圈'],
          success: (res) => {
            console.log(res)
            this.addIntegral(3)
            let wsxcene = null
            if (res.tapIndex == 0) {
              //分享到好友 可以发送小程序
              wsxcene = 'WXSceneSession'
              uni.share({
                provider: 'weixin',
                scene: wsxcene,
                type: 5,
                title: this.data.title,
                imageUrl: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg',
                miniProgram: {
                  id: 'gh_c8b17811efca',
                  path: 'pages_recruitMoney/recruitmentDetails/concurrently?id=' + this.id,
                  type: 0,
                  webUrl:
                    'https://www.bangbangtongcheng.com/conven_web/#/pages_recruitMoney/recruitmentDetails/concurrently?id=' +
                    this.id,
                },
                // summary: "我正在看，" + this.data.title + "赶紧跟我一起来查看！",
                success: function (res) {
                  console.log('success:' + JSON.stringify(res))
                },
                fail: function (err) {
                  console.log('fail:' + JSON.stringify(err))
                },
              })
            } else {
              uni.downloadFile({
                url: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg', //仅为示例，并非真实的资源
                success: (res) => {
                  if (res.statusCode === 200) {
                    let name = res.tempFilePath.substr(res.tempFilePath.lastIndexOf('/') + 1) //截取文件名
                    plus.zip.compressImage(
                      {
                        src: res.tempFilePath, //下载完图片的临时路径
                        dst: '_doc/photoData/' + name, //存储压缩完图片的临时路径
                        overwrite: true, //再次压缩会覆盖掉上次的目录
                        width: '150px', //缩放图片的宽度
                        height: '100px', //缩放图片的高度
                        quality: 5, //压缩图片质量,值越低,图片占内存越低
                      },
                      (event) => {
                        //压缩成功
                        wsxcene = 'WXSceneTimeline' //分享到朋友圈 只能H5 或者图片
                        uni.share({
                          provider: 'weixin',
                          scene: wsxcene,
                          type: 0,
                          title: this.data.title,
                          href:
                            'https://www.bangbangtongcheng.com/conven_web/#/pages_recruitMoney/recruitmentDetails/concurrently?id=' +
                            this.id,
                          imageUrl: event.target,
                          summary: '我正在看，' + this.data.title || ' ' + '赶紧跟我一起来查看！',
                          success: function (res) {
                            console.log('success:' + JSON.stringify(res))
                          },
                          fail: function (err) {
                            console.log('fail:' + JSON.stringify(err))
                          },
                        })
                      },
                      (error) => {
                        //压缩失败
                        uni.showToast({
                          title: '压缩失败',
                          icon: 'none',
                        })
                      }
                    )
                  }
                },
              })
            }
          },
          fail: function (res) {
            console.log(res.errMsg)
          },
        })
      },
      goBack(index) {
        uni.navigateBack({
          delta: 1,
        })
      },
      // 旧代码------------------------------------
      handleTouchStart(event) {
        console.log('@@@')
        // 记录开始触摸的Y坐标
        this.startY = event.touches[0].clientY
      },
      handleTouchMove(event) {
        // 当前触摸的Y坐标
        const currentY = event.touches[0].clientY
        // 计算滑动的距离
        const distance = currentY - this.startY
        // 根据滑动的距离判断是上滑还是下滑
        if (distance > 6) {
          // 上滑操作
          this.isViewVisible = true
        } else if (distance < -6) {
          // 下滑操作
          this.isViewVisible = false
        }
      },
      handleTouchEnd() {
        // 可以在这里做一些触摸结束后的处理
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .box {
    padding-top: 230rpx;
    padding-bottom: 190rpx;
    width: 100%;
    min-height: 100vh;
    background: #fff;
  }

  .head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    padding-top: 100rpx;
    width: 100%;
    background: #fff;

    .title {
      margin-bottom: 20rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 60rpx;
    }

    .fanhui {
      width: 30rpx;
      height: 30rpx;
    }

    .title-text {
      position: relative;
      margin-left: 10rpx;
      width: 100%;
      font-size: 32rpx;
      font-weight: 500;
      color: #000;

      .view-resume {
        position: absolute;
        top: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        padding-top: 2rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40rpx;
        color: #666666;
        font-weight: 500;
        font-size: 24rpx;

        .share-resume {
          margin-left: 20rpx;
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .head_right {
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }

    .center {
      width: 100%;

      .center_top {
        .isViewVisible {
          // position: fixed;
          // top: 0;
          // left: 0;
          width: 750rpx;
          z-index: 999;
        }

        .number {
          padding: 0 30rpx;
          font-size: 28rpx;
          font-weight: 400;
          margin-bottom: 20rpx;
          //position: relative;
          display: flex;
          font-size: 24rpx;
          color: #666666;
          height: 56rpx;
          //background: rgba(255, 77, 46, 0.1);
          background: #f6e5e4;
          line-height: 56rpx;
          justify-content: space-between;

          image {
            width: 24rpx;
            height: 24rpx;
          }

          .remark {
            color: #000;

            //margin-right: 136rpx;
            .status {
              position: relative;

              .select-text {
                padding: 0 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 220rpx;
                height: 50rpx;
                line-height: 50rpx;
                color: #666;
                font-size: 24rpx;
                // background: #F5F7F9;
                border-radius: 6rpx;
                border: 1rpx solid #ebebed;

                .arrow-right {
                  margin-left: auto;
                  width: 28rpx;
                  height: 28rpx;
                  transform: rotate(90deg);
                  transition: all 0.3s ease-in-out;
                }

                .open {
                  transform: rotate(-90deg);
                }
              }

              .select-box {
                position: absolute;
                left: 0;
                top: 55rpx;
                z-index: 3;
                width: 240rpx;
                line-height: 70rpx;
                text-align: center;
                font-size: 28rpx;
                color: #333;
                background: #f5f7f9;
                border-radius: 6rpx;
                border: 1rpx solid #ebebed;

                .checked {
                  position: relative;
                  background: #e7f5f4;

                  .checked-icon {
                    position: absolute;
                    top: 50%;
                    right: 10rpx;
                    transform: translateY(-50%);
                    width: 28rpx;
                    height: 28rpx;
                  }
                }
              }
            }
          }

          .icon {
            display: flex;
            justify-content: end;
            align-items: center;
            padding-top: 5rpx;

            view {
              margin-left: 40rpx;
            }

            .genduoNew {
              position: relative;

              .administrations {
                width: 140rpx;
                height: 150rpx;
                background-color: #fff;
                position: absolute;
                right: -10rpx;
                bottom: -180rpx;
                box-shadow: 0px 0px 20px 1px #d0d0d0;
                z-index: 100;
                padding: 0 32rpx;
                display: flex;
                flex-direction: column;

                .items {
                  height: 72rpx;
                  color: #5a5e66;
                  font-size: 28rpx;
                  font-weight: 500;
                  border-bottom: 1px solid #e0e0e0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                &::before {
                  content: '';
                  display: inline-block;
                  border-left: 24rpx solid transparent;
                  border-right: 20rpx solid transparent;
                  border-bottom: 24rpx solid #fff;
                  position: absolute;
                  right: 12rpx;
                  top: -22rpx;
                }
              }
            }
          }

          .informationNoBubble {
            width: 500rpx;
            padding: 10rpx;
            border-radius: 10rpx;
            background-color: #ffffff;
            position: absolute;
            bottom: -180rpx;
            border: 1px solid #888;
            left: 150rpx;
            z-index: 1;

            .binds_1 {
              font-size: 24rpx;
              font-weight: 400;
              color: #333333;
              margin-bottom: 10rpx;
            }

            .binds_2 {
              font-size: 24rpx;
              font-weight: 400;
              color: #64b6a8;
            }

            &::before {
              width: 0px;
              height: 0px;
              position: absolute;
              padding: 0;
              border-left: 24rpx solid transparent;
              border-right: 20rpx solid transparent;
              border-bottom: 24rpx solid #fff;
              content: '';
              z-index: 12;
              position: absolute;
              left: 12rpx;
              top: -20rpx;
            }

            &::after {
              width: 0px;
              height: 0px;
              position: absolute;
              padding: 0;
              border-left: 24rpx solid transparent;
              border-right: 20rpx solid transparent;
              border-bottom: 24rpx solid #888;
              content: '';
              z-index: 10;
              position: absolute;
              left: 12rpx;
              top: -24rpx;
            }
          }
        }

        .title {
          width: 710rpx;
          background: #ffffff;
          border-radius: 10rpx;
          margin: 0rpx auto;
          font-weight: 700;
          font-size: 32rpx;
          color: #000000;
          line-height: 48rpx;
          text-align: left;
          padding: 15rpx 20rpx;
        }

        .majorFunction {
          width: 710rpx;
          background: #ffffff;
          margin: 20rpx auto;
          overflow: hidden;
          border-radius: 10rpx;

          .info {
            display: flex;
            justify-content: space-around;

            view {
              width: 355rpx;
              padding: 0rpx 20rpx;
              margin-top: 20rpx;
            }

            .left {
              text-align: left;
              font-size: 28rpx;
              color: #333333;
            }

            .right {
              text-align: right;
              font-weight: 600;
              font-size: 32rpx;
              color: #000000;
            }
          }

          .benefitLabelNew {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: 20rpx 0rpx;
            padding: 0rpx 20rpx;

            .label {
              background: #f5f7f9;
              border-radius: 4rpx;
              padding: 8rpx 14rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 24rpx;
              color: #666666;
              margin-right: 10rpx;
              margin-bottom: 10rpx;
            }
          }
        }

        .secondaryFunction {
          width: 710rpx;
          background: #ffffff;
          margin: 20rpx auto;
          display: flex;
          padding: 30rpx;
          border-radius: 10rpx;
          justify-content: space-between;

          view {
            text-align: center;
          }

          .gap {
            width: 1rpx;
            height: 76rpx;
            background: #ebebed;
          }

          .info {
            font-size: 28rpx;

            .infoTop {
              color: #000000;
              font-weight: 700;
              margin-bottom: 13rpx;
            }

            .infoBottom {
              color: #333333;
            }
          }
        }

        .position {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .position_left {
            display: flex;
            align-items: center;

            .dizhi {
              font-size: 28rpx;
              font-weight: 400;
              color: #333;
              margin-right: 24rpx;
            }

            .zhiye {
              font-size: 28rpx;
              font-weight: 400;
              color: #333;
            }
          }

          .position_price {
            font-size: 32rpx;
            font-weight: 600;
            color: #e32d2d;
          }
        }

        .benefitLabel {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .label {
            margin-bottom: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #64b6a8;
            border-radius: 4rpx;
            border: 1px solid #64b6a8;
            margin-right: 20rpx;
          }
        }

        .need {
          width: 710rpx;
          background: #ffffff;
          margin: 20rpx auto;
          border-radius: 10rpx;
          padding: 0rpx 20rpx;
          overflow: hidden;

          .need_label {
            font-size: 28rpx;
            color: #333333;
            margin: 20rpx 0rpx;

            .view {
              color: #999;
            }
          }
        }
      }

      .JobDescription {
        width: 750rpx;
        margin: 32rpx 0rpx;

        view {
          width: 710rpx;
          margin: 0rpx auto;
        }

        .title {
          margin-bottom: 16rpx;
          font-weight: 700;
          font-size: 32rpx;
          color: #000000;
          display: flex;
          align-items: center;
        }

        .detailed {
          background: #ffffff;
          border-radius: 10rpx;
          font-size: 28rpx;
          color: #000000;
          font-weight: 400;
          word-break: break-all;
          line-break: anywhere;
          line-height: 42rpx;
          padding: 20rpx;
          overflow: hidden;
        }
      }

      .cutApart {
        width: 750rpx;
        height: 20rpx;
        background-color: #f2f2f2;
      }

      .center_bottom {
        width: 750rpx;

        .Map {
          margin-top: 32rpx;
          margin-bottom: 32rpx;

          view {
            width: 710rpx;
            margin: 0rpx auto;
          }

          .title {
            margin-bottom: 16rpx;
            font-weight: 700;
            font-size: 32rpx;
            color: #000000;
            display: flex;
            align-items: center;
          }

          .maps {
            height: 200px;
            position: relative;

            .AppMap {
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
              overflow: hidden;
            }

            .workAddress {
              position: absolute;
              top: 0rpx;
              left: 10rpx;
              width: 690rpx;
              padding: 18rpx 30rpx;
              background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.6) 100%
              );
              box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(24, 97, 93, 0.08);
              border-radius: 10rpx;
              border: 1rpx solid;
              border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))
                1 1;
              backdrop-filter: blur(5px);
              font-size: 28rpx;
              color: #000000;
              display: flex;
              justify-content: space-between;

              view {
                width: 447rpx;
              }

              .toOpenMap {
                width: 140rpx;
                background: #0fa291;
                border-radius: 32rpx;
                font-weight: 500;
                font-size: 28rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                margin: auto;
                color: #ffffff;
                padding: 0rpx 20rpx;
              }
            }
          }
        }

        .corporation {
          width: 710rpx;
          margin: 0rpx auto;

          .briefIntroduction {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16rpx;

            .title {
              font-size: 32rpx;
              font-weight: 550;
              color: #333333;
              display: flex;
              align-items: center;
            }

            .image {
              width: 38rpx;
              height: 38rpx;
            }
          }

          .corporation_center {
            margin-bottom: 16rpx;
            background-color: white;
            padding: 25rpx;
            border-radius: 10rpx;

            .title,
            .content {
              font-size: 28rpx;
              color: #000000;
              line-height: 42rpx;
            }

            .title {
              // font-size: 32rpx;
              // font-weight: 550;
              // color: #333333;
              // margin-bottom: 10rpx;
            }

            .content {
              // word-break: break-all;
              // line-break: anywhere;
              // font-size: 26rpx;
              // font-weight: 400;
              // color: #333333;
              margin-bottom: 24rpx;
            }

            .environment {
              // .image {
              // 	width: 100%;
              // }
              display: flex;
              justify-content: space-between;

              .image {
                width: 210rpx;
                height: 157rpx;
                border-radius: 10rpx;
                // margin-bottom: 8rpx;
              }

              .more {
                position: absolute;
                right: 0rpx;
                bottom: 10rpx;
                width: 44rpx;
                height: 44rpx;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 6rpx 0rpx 11rpx 0rpx;
                font-size: 24rpx;
                color: #ffffff;
                line-height: 44rpx;
                text-align: center;
              }
            }
          }

          .personalCard {
            width: 710rpx;
            margin: 0rpx auto;
            height: 202rpx;
            background-color: #ffffff;
            //box-shadow: 0px 0px 6rpx 1rpx rgba(0, 0, 0, 0.16);
            border-radius: 20rpx;
            margin-top: 20rpx;
            margin-bottom: 28rpx;
            position: relative;

            .lookOver {
              width: 198rpx;
              height: 50rpx;
              background: #0fa291;
              border-radius: 0rpx 22rpx 0rpx 25rpx;
              position: absolute;
              top: 0;
              right: 0;
              font-size: 24rpx;
              font-weight: 400;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .personalCard_center {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 100%;

              .left {
                margin-left: 30rpx;
                display: flex;
                align-items: center;
                height: 100%;

                .headSculpture {
                  position: relative;
                  width: 125rpx;
                  height: 125rpx;

                  .image {
                    width: 125rpx;
                    height: 125rpx;
                    border-radius: 120rpx;
                  }

                  .name {
                    position: absolute;
                    bottom: -26rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 154rpx;
                    text-align: center;
                    // font-size: 24rpx;
                    // color: #fff;
                    // text-align: center;
                    // line-height: 36rpx;
                    // background: url("https://pic.bangbangtongcheng.com/static/name.png");
                    // background-size: 100% 100%;
                    font-size: 22rpx;
                    font-weight: 600;
                    letter-spacing: 2rpx;
                    overflow: hidden;

                    .personal-label {
                      display: inline-block;
                      padding: 2rpx 6rpx;
                      //min-width: 154rpx;
                      background: url('https://pic.bangbangtongcheng.com/static/my/tag1.png') center
                        no-repeat;
                      background-size: cover;

                      text {
                        color: #333;
                        font-size: 22rpx;
                      }
                    }

                    .shop-label text {
                      display: inline-block;
                      padding: 2rpx 8rpx;
                      // min-width: 110rpx;
                      // max-width: 150rpx;
                      // height: 40rpx;
                      // line-height: 40rpx;
                      background: url('https://pic.bangbangtongcheng.com/static/my/tag2.png') center
                        no-repeat;
                      background-size: 100% 100%;
                      color: #4e260a;
                      font-size: 22rpx;
                      white-space: normal;
                      overflow: hidden;
                      letter-spacing: 1rpx;
                    }
                  }
                }

                .information {
                  margin-left: 24rpx;
                  padding: 32rpx 0;

                  .name {
                    width: 300rpx;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    font-size: 36rpx;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 16rpx;
                  }

                  .vip-label {
                    // padding: 3rpx 6rpx;
                    // background: #F6F0FF;
                    // border-radius: 6rpx 6rpx 6rpx 6rpx;
                    // opacity: 1;
                    // border: 2rpx solid #BD90D9;
                    // font-size: 24rpx;
                    // font-weight: 500;
                    // color: #BD90D9;
                    width: 120rpx;
                    //height: 40rpx;
                    //line-height: 40rpx;
                    background: #d1eff7;
                    border-radius: 4rpx;
                    font-size: 24rpx;
                    color: #1a657a;
                    padding: 8rpx 11rpx;
                  }

                  .userGradeNew {
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    margin-bottom: 14rpx;
                    font-size: 24rpx;
                    color: #333;

                    .star-vip {
                      ::deep .u-rate__content__item {
                        width: 30rpx;
                      }
                    }

                    margin-top: 16rpx;
                  }

                  .grade {
                    display: flex;
                    align-items: center;
                    margin-top: 10rpx;

                    .image {
                      width: 40rpx;
                      height: 40rpx;
                      margin-right: 10rpx;
                    }
                  }
                }
              }

              .right {
                margin-right: 40rpx;
                display: flex;
                align-items: center;

                .image {
                  width: 54rpx;
                  height: 54rpx;
                  margin-right: 10rpx;
                }

                .GZ {
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #333333;
                }
              }
            }
          }

          .disclaimer {
            padding: 0rpx 20rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            line-height: 36rpx;
          }
        }
      }
    }
  }

  .section {
    position: relative;
    padding: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    border-bottom: 1rpx solid #ebebeb;

    .section-title {
      display: flex;
      align-items: center;
      height: 60rpx;
      line-height: 60rpx;
      color: #000;
      font-weight: bolder;

      .title-line {
        margin-right: 10rpx;
        display: inline-block;
        width: 8rpx;
        height: 32rpx;
        background: #0fa291;
        border-radius: 4rpx;
      }

      .right-text {
        margin-left: auto;
        padding: 8rpx 16rpx;
        font-size: 24rpx;
        line-height: normal;
        color: #0fa291;
        background: #e7f5f4;
        border-radius: 4rpx;
      }

      .work-add {
        margin-left: auto;
        margin-right: 20rpx;
        padding: 8rpx 16rpx;
        color: #0fa291;
        font-size: 24rpx;
        line-height: 24rpx;
        font-weight: 500;
        background: #e7f5f4;
        border-radius: 32rpx;
        border: 1rpx solid #0fa291;
      }
    }

    .form-item {
      box-sizing: border-box;
      position: relative;
      padding: 10rpx 0;
      display: flex;
      justify-content: flex-start;
      align-items: self-start;

      .label,
      .text {
        min-width: 140rpx;
        font-size: 28rpx;
        color: #333333;
      }

      .text {
        flex: 1;
        color: #000;
        white-space: wrap;
        word-break: break-all;
      }

      .arrow-right {
        margin-left: auto;
        width: 28rpx;
        height: 28rpx;
        transition: all 0.3s ease-in-out;
      }

      .form-item-tag {
        display: inline-block;
        margin: 5rpx 10rpx 5rpx 0;
        padding: 8rpx 26rpx;
        height: 40rpx;
        line-height: 40rpx;
        color: #666;
        font-size: 24rpx;
        background: #f5f7f9;
        border-radius: 4rpx;
        white-space: nowrap;
      }

      .open {
        transform: rotate(-90deg);
      }

      .seclector-box {
        position: absolute;
        top: 90%;
        left: 0;

        padding: 20rpx 10rpx;
        display: flex;
        flex-wrap: wrap;
        background: #f5f7f9;
        border: 1rpx solid #ebebed;
        border-radius: 10rpx;
        box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(24, 97, 93, 0.1);
        transition: all 0.3s ease-in-out;
      }

      .center-section {
        margin: 0 auto;
        width: 710rpx;
        background: #ffffff;
        border-radius: 20rpx;

        .content-title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .content-title-right {
            display: flex;
            align-items: center;
            color: #0fa291;
            font-size: 24rpx;
          }
        }

        .content-tip {
          margin: 20rpx 0;
          font-size: 24rpx;
          color: #e00201;
        }
      }

      .skill-img {
        margin-top: 10rpx;
      }

      /* 放在form-item 样式最后，用户覆盖未选中样式*/
      .checked {
        position: relative;
        color: #0fa291;
        background: #e7f5f4;

        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          width: 28rpx;
          height: 28rpx;
          background: url('https://pic.bangbangtongcheng.com/static/bbzc/checked-tag.png') center
            no-repeat;
          background-size: 100% 100%;
        }
      }

      /* form-item 结束*/
    }

    .bonus-item {
      width: 100%;
      flex-wrap: wrap;

      .content {
        margin: 10rpx 0;
        padding: 13rpx 20rpx;
        width: 100%;
        line-height: 56rpx;
        background: #f5f7f9;
        border-radius: 10rpx;

        .second-line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          color: #333;
        }

        .img {
          margin: 0 10rpx 10rpx 0;
          display: inline-block;
          width: 160rpx;
          height: 160rpx;

          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
    }

    .avator {
      position: absolute;
      top: 80rpx;
      right: 20rpx;
      width: 180rpx;
      height: 180rpx;
      border-radius: 90rpx;
      border: 1rpx solid #ebebed;
    }
  }

  .feahd_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 20rpx;
    width: 750rpx;
    height: calc(120rpx + env(safe-area-inset-bottom) / 2);
    //padding: 0 30rpx calc(8rpx + env(safe-area-inset-bottom) / 2);
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
    border-top-right-radius: 25rpx;
    border-top-left-radius: 25rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 1000;

    .sendResumes {
      width: 242rpx;
      height: 70rpx;
    }

    .sendResume,
    .collect {
      margin: 0rpx 20rpx;
      width: 325rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      font-size: 32rpx;
      color: #ffffff;
      background: #0fa291;
      border-radius: 45rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .img {
        margin-right: 20rpx;
        width: 30rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }

    .feahd_right {
      flex: 1;
      //margin-left: 50rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .weigui {
        position: absolute;
        padding: 0px 10px 0px 10px;
        width: 690rpx;
        left: 30rpx;
        bottom: 0rpx;
        animation: all 6s;
        animation-name: mycolor;

        .img {
          width: 100%;
          height: 134rpx;
        }

        p {
          position: absolute;
          left: 100rpx;
          bottom: 64rpx;
          font-size: 34rpx;
          color: #fff;
        }
      }

      @keyframes mycolor {
        0% {
          left: 30rpx;
          bottom: 140rpx;
          transform: scale(0 0.1);
        }

        100% {
          left: 30rpx;
          bottom: 140rpx;
          opacity: 0;
        }
      }
    }
  }

  .preview-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    & > img {
      width: 100%;
    }
  }

  /* 备注信息 样式开始 */
  .mark {
    margin: 20rpx;
    padding: 20rpx;
    color: #666;
    font-size: 28rpx;
    background: #f5f7f9;
    border-radius: 20rpx;
    border: 1rpx solid #f1f5f5;

    .history {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .history-right {
        display: flex;
        align-items: center;
      }
    }

    .voice {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .voice-left {
        display: flex;
        align-items: center;

        .voice-icon {
          margin-left: 5rpx;
          width: 38rpx;
          height: 38rpx;
        }
      }

      .voice-right {
        width: 140rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        background: #0fa291;
        border-radius: 32rpx;
      }
    }

    .text-record {
      margin-bottom: 20rpx;
    }

    .media {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .video-btn {
        position: absolute;
        left: 20rpx;
        top: 20rpx;
        width: 120rpx;
        height: 120rpx;
        z-index: 2;
      }

      .uploadPhotos {
        height: 152rpx;
        width: 152rpx;
        background: #fff;

        .Photos {
          height: 152rpx;
          width: 152rpx;
          position: relative;

          .image {
            width: 100%;
            height: 100%;
          }

          ::v-deep .solids {
            width: 100%;
            height: 100%;
            margin: 0;

            &::after {
              border: none;
            }
          }

          ::v-deep .grid.grid-square {
            height: 100%;

            .bg-img {
              width: 100%;
              height: 100%;
              margin-bottom: 0;
              margin-right: 0;
              padding-bottom: 0;
            }
          }

          .colse {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #f0f0f0;
            border-radius: 0 8rpx 0 8rpx;
          }

          .Photos_close {
            border-bottom-left-radius: 6rpx;
            padding: 6rpx 12rpx;
            height: auto;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
          }

          .cCircle {
            // background: rgba(0,0,0,0.5);
            width: 120rpx;
            height: 120rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          .maskimg {
            background: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          .hide1 {
            animation: change 3s;
          }

          @keyframes change {
            0% {
              opacity: 1;
            }

            100% {
              opacity: 0;
            }
          }
        }

        .zhaop {
          width: 150rpx;
          height: 150rpx;
          background-color: #ffffff;
          border-radius: 8rpx;
          border: 1px solid #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;

          .image {
            width: 48rpx;
            height: 48rpx;
          }
        }
      }
    }
  }

  /deep/ .u-upload__wrap__preview {
    margin: 0;
  }

  /deep/ .u-upload__button {
    margin-right: 20rpx !important;
    width: 153rpx !important;
    background: #fff;
  }

  /deep/ .u-read-more .u-read-more__content span {
    color: #000;
    font-size: 28rpx;
  }

  /deep/ .uni-textarea-textarea {
    font-size: 28rpx;
    color: #000;
  }

  /deep/ .u-textarea__count {
    bottom: 10rpx;
    padding: 5rpx 13rpx;
    background-color: #ebebed !important;
  }

  .warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .video-preview {
      width: 100%;
    }
  }

  /* 备注信息 样式结束 */

  /*loading 样式开始 */
  .dengLoadingVue {
    .maskVueHiddenShow {
      z-index: 999999;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;

      .maskVueHiddenShowWrapper {
        width: 80%;
        height: 300rpx;
        position: fixed;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        animation: 0.5s;

        .loding {
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
  }

  .inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #64b6a8;
  }

  .inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #64b6a8;
  }

  .inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #64b6a8;
  }

  @keyframes rotate-one {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-two {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-three {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }

  @keyframes maskVueHiddenShowWrapper {
    0% {
      width: 80%;
    }

    100% {
      width: 0;
    }
  }

  /*loading 样式结束 */

  .binds_shield {
    width: 600rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 70rpx 44rpx 44rpx 44rpx;

    .text {
      font-size: 30rpx;
      font-weight: 400;
      color: #000000;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 36rpx;

      .qx_btn {
        width: 160rpx;
        height: 60rpx;
        border-radius: 38rpx;
        border: 1px solid #64b6a8;
        font-size: 30rpx;
        font-weight: 400;
        color: #64b6a8;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .qd_btn {
        width: 160rpx;
        height: 60rpx;
        background-color: #64b6a8;
        border-radius: 38rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
